<section class="center">
    <form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="_submitForm()">
        <div nz-form-item>
            <div nz-form-control>
                <nz-input formControlName="userName" [nzPlaceHolder]="'用户名'" [nzSize]="'large'">
                    <ng-template #prefix>
                        <i class="anticon anticon-user"></i>
                    </ng-template>
                </nz-input>
                <div nz-form-explain *ngIf="validateForm.controls.userName.dirty&&validateForm.controls.userName.hasError('required')">请输入你的账号!</div>
            </div>
        </div>
        <div nz-form-item>
            <div nz-form-control>
                <nz-input formControlName="passWord" [nzType]="'password'" [nzPlaceHolder]="'密码'" [nzSize]="'large'">
                    <ng-template #prefix>
                        <i class="anticon anticon-lock"></i>
                    </ng-template>
                </nz-input>
                <div nz-form-explain style="color:#f04134" *ngIf="validateForm.controls.passWord.dirty&&validateForm.controls.passWord.hasError('required')||truePw">账号或密码错误!</div>
                <!-- <div nz-form-explain style="color:#f04134" *ngIf="truePw">账号或密码错误!</div> -->
            </div>
        </div>
        <div nz-form-item>
            <div nz-form-control>
                <!-- <label nz-checkbox formControlName="remember">
            <span>记住密码</span>
          </label> -->
                <a class="login-form-forgot" class="login-form-forgot" (click)="showModal()">忘记密码？</a>
                <button nz-button class="login-form-button" [nzType]="'primary'" [nzSize]="'large'" (click)="loadIng()">登录</button>
            </div>
        </div>
    </form>
    <section>
        <nz-modal [nzVisible]="isVisible" [nzTitle]="modalTitle" [nzContent]="modalContent" [nzFooter]="modalFooter" (nzOnCancel)="handleCancel($event)">
            <ng-template #modalTitle>
                忘记密码
            </ng-template>
            <ng-template #modalContent>
                <section nz-row>
                    <p nz-col [nzSpan]="6">绑定的手机号码</p>
                    <nz-input style="width:200px" [(ngModel)]="mobile" [nzPlaceHolder]="'手机号'"></nz-input>
                    <!-- <p nz-col [nzSpan]="8">{{mobile}}</p> -->
                </section>
                <section nz-row style="margin-top:15px;">
                    <p nz-col [nzSpan]="6">验证码</p>
                    <div nz-col [nzSpan]="8">
                        <nz-input style="width:70%" [(ngModel)]="validCode" [nzPlaceHolder]="'请输入验证码'"></nz-input>
                        <div class="ext" *ngIf="trueCode">验证码错误!</div>
                    </div>
                    <button nz-button [nzType]="'primary'" (click)="loadOne($event)" [nzLoading]="isLoadingOne" [disabled]="!this.mobile">
                      <span *ngIf="isLoadingOne">若未收到短信，请等待{{times}}秒</span>                      
                      <span *ngIf="!isLoadingOne">获取验证码</span>
                    </button>
                </section>
            </ng-template>
            <ng-template #modalFooter>
                <button nz-button [nzType]="'default'" [nzSize]="'large'" (click)="handleCancel($event)">
                返 回
                </button>
                <button nz-button [nzType]="'primary'" [nzSize]="'large'" (click)="handleOk($event)" [nzLoading]="isConfirmLoading">
                下一步
                </button>
            </ng-template>
        </nz-modal>
    </section>
    <section>
        <nz-modal [nzVisible]="isPassWord" [nzTitle]="modalTitleB" [nzContent]="modalContentB" [nzFooter]="false" (nzOnCancel)="handlePw($event)">
            <ng-template #modalTitleB>
                重置密码
            </ng-template>
            <ng-template #modalContentB>

                <form *ngIf="!isSuccess" nz-form [formGroup]="PasswordForm" (ngSubmit)="_pwsubmit()">
                    <div nz-form-item nz-row>
                        <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                            <label for="password" nz-form-item-required>新的密码</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
                            <nz-input [nzSize]="'large'" formControlName="password" [nzType]="'password'" [nzId]="'password'" (ngModelChange)="updateConfirmValidator()"></nz-input>
                            <div nz-form-explain *ngIf="getFormControl('password').dirty&&getFormControl('password').hasError('required')">请输入密码!</div>
                            <div nz-form-explain *ngIf="getFormControl('password').dirty&&getFormControl('password').hasError('password')">这密码必须有8-16位的大小写英文以及数字组成!</div>

                        </div>
                    </div>
                    <div nz-form-item nz-row>
                        <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                            <label for="checkPassword" nz-form-item-required>再次输入新的密码</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
                            <nz-input [nzSize]="'large'" formControlName="checkPassword" [nzType]="'password'" [nzId]="'checkPassword'"></nz-input>
                            <div nz-form-explain *ngIf="getFormControl('checkPassword').dirty&&getFormControl('checkPassword').hasError('required')">请确认你的密码!</div>
                            <div nz-form-explain *ngIf="getFormControl('checkPassword').dirty&&getFormControl('checkPassword').hasError('confirm')">两次密码输入不一致!</div>
                        </div>
                    </div>
                    <div nz-form-item nz-row>
                        <div nz-form-control nz-col [nzSpan]="6" [nzOffset]="18">
                            <button nz-button [nzType]="'primary'" [nzSize]="'large'">完成</button>
                        </div>
                    </div>
                </form>
                <!-- <ng-template [ngIf]="isSuccess">
                    <section>
                        <main>密码重置成功</main>
                        <footer><a (click)="handlePw()">返回首页</a></footer>
                    </section>
                </ng-template> -->
            </ng-template>

        </nz-modal>
    </section>
</section>